<template>
  <div ref="chartRef" class="chart">


  </div>
</template>
<script setup lang="ts">
import type { ECharts, EChartsCoreOption } from 'echarts';
import { onMounted, shallowRef, useTemplateRef, watch, type PropType  } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  option: {
    type: Object as PropType<EChartsCoreOption>,
    required: true,
    default: () => ({})
  },
  loading: Boolean
})

const chartRef = useTemplateRef<HTMLDivElement | null>('chartRef');
const chart = shallowRef<ECharts | null>(null);

const init = ()=>{
  if (props.option && chartRef.value) {
    chart.value = echarts.init(chartRef.value);
    setOption(props.option);
  }
}

const setOption = (option:any, notMerge?:boolean, lazyUpdate?:boolean)=>{
  if(chart.value){
    chart.value.setOption(option, notMerge, lazyUpdate);
  }
}

onMounted(()=>{
  init();
})

function resize() { // 定义resize函数，用于调整图表大小// 使用可选链操作符(?.)确保chart.value存在时才执行resize方法
  chart.value?.resize(); // 使用可选链操作符安全地调用chart的resize方法  // 如果chart.value存在，则执行resize()方法
}

watch(()=>props.option, ()=>{
  setOption(props.option);
})

defineExpose({
  chart,
  setOption,
  resize
})

</script>
<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
</style>